<template>
  <div>
    <el-card>
      <div slot="header">
        <span><i class="el-icon-collection"></i> 汇总报表</span>
      </div>
      <el-row>
        <el-col :span="10">
          <u-table
            :data="tableData"
            :height="650"
            use-virtual
            :row-height="rowHeight"
            border
            :row-style="rowStyle"
            ref="table"
          >
            <u-table-column type="index" width="80" />

            <u-table-column
              align="center"
              label="库龄分布"
              prop="inventoryAgeDateRange"
            >
              <template slot-scope="scope">
                <div
                  style="
                    color: rgb(37, 137, 255);
                    cursor: pointer;
                    text-decoration: underline;
                  "
                  @click="handleClick(scope.row)"
                >
                  {{ scope.row.inventoryAgeDateRange }}
                </div>
              </template>
            </u-table-column>
            <u-table-column
              align="center"
              label="库存总数量"
              prop="inventoryQuantity"
            >
            </u-table-column>
            <u-table-column
              align="center"
              label="库存量占比"
              prop="inventoryQuantityRatio"
            >
              <template slot-scope="scope">
                <div>{{ scope.row.inventoryQuantityRatio }}%</div>
              </template>
            </u-table-column>
            <u-table-column
              align="center"
              label="库存总金额"
              prop="inventoryAmount"
            >
            </u-table-column>
            <u-table-column
              align="center"
              label="库存金额占比"
              prop="inventoryAmountRatio"
            >
              <template slot-scope="scope">
                <div>{{ scope.row.inventoryAmountRatio }}%</div>
              </template>
            </u-table-column>
          </u-table>
        </el-col>
        <el-col :span="14">
          <div
            style="margin-left: 2px; margin-right: 2px; height: 310px"
            id="echartsAll"
          ></div>
          <div
            style="margin-left: 2px; margin-right: 2px; height: 310px"
            id="mainAll"
          ></div>
        </el-col>
        <!-- </div> -->
      </el-row>
      <!-- <el-col :span="3"><span></span></el-col> -->
    </el-card>

    <el-row
      :gutter="10"
      v-for="item in xqpjTableData"
      :key="item.id"
      style="background: #fff; padding: 16px 16px 0"
    >
      <!-- <div > -->

      <el-card>
        <div slot="header">
          <span><i class="el-icon-collection"></i> {{ item.cpbm }}报表</span>
        </div>
        <el-col :span="10">
          <u-table
            :data="item.name"
            :height="650"
            use-virtual
            :row-height="rowHeight"
            border
          >
            <u-table-column
              align="center"
              label="库龄分布"
              prop="inventoryAgeDateRange"
            >
              <template slot-scope="scope">
                <div
                  style="
                    color: rgb(37, 137, 255);
                    cursor: pointer;
                    text-decoration: underline;
                  "
                  @click="handleClick(scope.row, item.cpbm)"
                >
                  {{ scope.row.inventoryAgeDateRange }}
                </div>
              </template>
            </u-table-column>
            <u-table-column
              align="center"
              label="库存总数量"
              prop="inventoryQuantity"
            >
            </u-table-column>
            <u-table-column
              align="center"
              label="库存量占比"
              prop="inventoryQuantityRatio"
            >
              <template slot-scope="scope">
                <div>{{ scope.row.inventoryQuantityRatio }}%</div>
              </template>
            </u-table-column>
            <u-table-column
              align="center"
              label="库存总金额"
              prop="inventoryAmount"
            >
              <template slot-scope="scope">
                <div>{{ scope.row.inventoryAmount }}</div>
              </template>
            </u-table-column>
            <u-table-column
              align="center"
              label="库存金额占比"
              prop="inventoryAmountRatio"
            >
              <template slot-scope="scope">
                <div>{{ scope.row.inventoryAmountRatio }}%</div>
              </template>
            </u-table-column>
          </u-table>
        </el-col>
        <el-col :span="14">
          <MinChart
            :id="item.cpbm"
            :minchartData="item.barData"
            height="310px"
            width="100%"
          />
          <!--  -->
          <MixChart
            :id="item.cpbm + 'line'"
            :minchartData="item.lineData"
            height="310px"
            width="100%"
          />
        </el-col>
      </el-card>
    </el-row>
    <!--  -->

    <el-dialog title="" :visible.sync="open" width="80%" v-if="open">
      <el-button
        type="warning"
        plain
        icon="el-icon-download"
        size="mini"
        @click="handleExport"
        >导出</el-button
      >
      <MergeTable :tableData="BiInventoryAgeDwdList" />
      <pagination
        v-show="pageListTotal > 0"
        :total="pageListTotal"
        :page.sync="pageReq.pageNum"
        :limit.sync="pageReq.pageSize"
        @pagination="pageList"
      />
    </el-dialog>
  </div>
</template>

  <script>
import * as echarts from "echarts/lib/echarts.js";
import {
  listBiInventoryAgeDwd,
  getBiInventoryAgeDwd,
  delBiInventoryAgeDwd,
  addBiInventoryAgeDwd,
  updateBiInventoryAgeDwd,
  synData,
  inventoryAgeDetail,
  selectSkuLike,
  inventoryAgeAllSum,
  distributionDiagraAll,
  voList,
} from "@/api/Warehouse/BiInventoryAgeDwd";
import MergeTable from "./MergeTable";

import MinChart from "@/views/Warehouse/AgeDetail/Chart/MinChart.vue";
import MixChart from "@/views/Warehouse/AgeDetail/Chart/MixChart.vue";
export default {
  props: {
    message: {
      type: String,
      // required: true
      default: "",
    },
  },
  dicts: [
    "sys_product_age",
    "sys_product_item",
    "sys_product_secondary",
    "sys_product_cycle",
    "sys_product_pl",
    "sys_product_jijie",
    "sys_product_pp",
  ],
  components: {
    MergeTable,
    MinChart,
    MixChart,
  },
  data() {
    return {
      xqpjTableData: [],
      pageListTotal: 0,
      pageReq: {
        pageNum: 1,
        pageSize: 10,
      },
      rowList: {},
      // inventoryObj: {},
      //关联信息
      BiInventoryAgeDwdList: [],
      open: false,
      pjtUrl: process.env.VUE_APP_BASE_API,

      selectSkuLikeList: [],
      height: 430,
      rowHeight: 30,
      tableData: [],
      // tableData: Array.from({ length: 5 }, (_, idx) => ({
      //   id: idx + 1,
      //   date: "2016-05-03",
      //   name: "王小虎",
      //   province: "上海",
      //   city: "普陀区",
      //   address: "上海市普陀区金沙江路 1518 弄",
      //   zip: 200333,
      // })),
      // 查询参数
      queryParams: {
        // pageNum: 1,
        // pageSize: 10,
        // groupLabel: "sku",
        // sku: null,
        // inventoryAgeDays: null,
        // inventoryAgeDateRange: null,
        // inventoryQuantity: null,
        // inventoryAmount: null,
        // firstLevelColumnList: null,
        // secondLevelColumnList: null,
        // threeLevelColumnList: null,
        // productSeasonList: null,
        // groupLabel: null,
        // itemList: null,
        // skuList: null,
        // dataDate: null,
        // transactionDate: null,
      },
    };
  },
  /** 一级 */
  // private List<String> firstLevelColumnList;
  // /** 一级 */
  // private List<String> secondLevelColumnList;

  // /** 三级 */
  // private List<String> threeLevelColumnList;

  // /** 产品季节 */
  // private List<String> productSeasonList;

  // /** 产品款号 */
  // private List<String> itemList;

  // /** sku */
  // private List<String> skuList;
  // private String sku;

  // /** 分组 */
  // private String groupLabel;

  // /** 是否按季节分组 */
  // private Boolean groupSeason;

  // /** 入仓日期 */
  // private Date dataDate;

  // /**出仓日期*/
  // private Date transactionDate;
  watch: {
    // 监听 message 的变化
    message: function (newVal, oldVal) {
      // 当 message 发生变化时，这个函数会被调用
      console.log("Message changed from", oldVal, "to", newVal);
      this.getList();
      this.$nextTick(() => {
        this.$refs.table.doLayout();
        // console.log('渲染完成时间', new Date());
      });
    },
  },
  created() {
    this.getDicts("sys_product_pp").then((res) => {
      // console.log(JSON.stringify(response));
      const xsqs = res.data;
      for (let i = 0; i < xsqs.length; i++) {
        const xqpjTable = {};
        xqpjTable.index = i;
        xqpjTable.id = xsqs[i].dictValue;
        xqpjTable.cpbm = xsqs[i].dictLabel;
        xqpjTable.myd = "";
        xqpjTable.parent = "xsq";
        xqpjTable.remark = xsqs[i].remark;
        xqpjTable.name = [];
        xqpjTable.barData = [];
        xqpjTable.lineData = [];

        this.xqpjTableData.push(xqpjTable);
        // if (xqpjTable.cpbm !== "VOOOHOOO") {
        this.getselectProTypeList(xqpjTable.cpbm);
        // }
      }
    });

    this.getList();
  },
  mounted() {
    console.log(JSON.stringify(this.xqpjTableData));
    this.tableList();
  },
  methods: {
    getselectProTypeList(dictLabel) {
      //循环列表
      inventoryAgeAllSum({ brand: dictLabel }).then((res) => {
        if (res.length > 0) {
          this.xqpjTableData.forEach((item) => {
            if (item.cpbm == dictLabel) {
              item.name = res;
            }
          });
        }
      });
      //循环图
      distributionDiagraAll({ brand: dictLabel }).then((response) => {
        if (response) {
          // let result = [];
          // result.push(response);
          this.xqpjTableData.forEach((item) => {
            if (item.cpbm == dictLabel) {
              item.barData.push(response);
              item.lineData.push(response);
            }
          });
        }
      });
      console.log(JSON.stringify(this.xqpjTableData));
    },
    tableEdit(row, column, cell, event) {
      console.log(JSON.stringify(row));
      this.queryParams.skuList = row.sku;
      inventoryAgeDetail(this.queryParams).then((response) => {
        if (response) {
          this.myChartBar(result);
          // this.myChartarea(result);
        }
      });
    },
    tableList() {
      console.log(111);
      //   console.log(JSON.stringify(row));
      //   this.queryParams.skuList = row.sku;
      distributionDiagraAll(this.queryParams).then((response) => {
        if (response) {
          let result = [];
          result.push(response);
          this.myChartBar(result);
          this.myChartarea(result);
        }
      });
    },
    myChartBar(response) {
      //   var myChart = echarts.init(document.getElementById("echartsAll"));
      var option = {
        title: {
          // text: "库存价值占比",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        // grid: {
        //   left: "3%",
        //   right: "4%",
        //   bottom: "3%",
        //   containLabel: true,
        // },
        legend: {
          data: ["库存数量"],
        },
        xAxis: [
          {
            type: "category",
            data: [
              "0~30天",
              "31~60天",
              "61~90天",
              "91~120天",
              "121~150天",
              "151~180天",
              "181~240天",
              "241~300天",
              "300~365天",
              "1~2年",
              "2~3年",
              "3年以上",
            ],
            axisLabel: {
              interval: 0, //代表显示所有x轴标签显示
              // rotate: 45, //代表逆时针旋转45度
            },
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "库存数量",
            type: "bar",
            barWidth: "20%",
            data: [],
          },
        ],
      };

      // 从 JSON 数据中提取库存数量，并填充到 series.data 中
      response.forEach(function (item) {
        option.series[0].data.push(
          item.inventoryQuantity0,
          item.inventoryQuantity30,
          item.inventoryQuantity60,
          item.inventoryQuantity90,
          item.inventoryQuantity120,
          item.inventoryQuantity150,
          item.inventoryQuantity180,
          item.inventoryQuantity240,
          item.inventoryQuantity300,
          item.inventoryQuantity1Y,
          item.inventoryQuantity2Y,
          item.inventoryQuantity3Y
        );
      });

      // 使用刚指定的配置项和数据显示图表。
      //   myChart.setOption(option);
      var myChartDom = document.getElementById("echartsAll");

      // 检查是否已经存在ECharts实例
      if (echarts.getInstanceByDom(myChartDom)) {
        // 如果存在，销毁它
        echarts.getInstanceByDom(myChartDom).dispose();
      }

      // 初始化新的ECharts实例
      var myChart = echarts.init(myChartDom);

      // Raddar.setOption(option);
      myChart.setOption(option);
      // 为柱状图添加点击事件
      myChart.on("click", this.handleClick);
    },
    handleClick(params, brand) {
      // console.log(JSON.stringify(brand));
      // alert(
      //   "你点击的是：" +
      //     params.name +
      //     "，系列：" +
      //     params.seriesName +
      //     "，数据值：" +
      //     params.value
      // );
      this.pageReq = {
        ...this.pageReq,
        brand: brand,

        inventoryAgeDateRange: params.name
          ? params.name
          : params.inventoryAgeDateRange,
      };
      voList(this.pageReq).then((response) => {
        this.BiInventoryAgeDwdList = response.rows;

        this.pageListTotal = response.total;
        this.open = true;
        // this.loading = false;
      });
    },
    pageList() {
      voList(this.pageReq).then((response) => {
        this.BiInventoryAgeDwdList = response.rows;

        this.pageListTotal = response.total;
        this.open = true;
        // this.loading = false;
      });
    },
    myChartarea(response) {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("mainAll"));

      // 指定图表的配置项和数据
      var option = {
        title: {
          // text: "库存价值占比",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        legend: {
          data: ["库存价值"],
        },
        toolbox: {
          feature: {
            // saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "0~30天",
            "31~60天",
            "61~90天",
            "91~120天",
            "121~150天",
            "151~180天",
            "181~240天",
            "241~300天",
            "300~365天",
            "1~2年",
            "2~3年",
            "3年以上",
          ],
          axisLabel: {
            interval: 0, //代表显示所有x轴标签显示
            // rotate: 45, //代表逆时针旋转45度
          },
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "库存价值",
            type: "line", // 指定为折线图
            areaStyle: {}, // 开启面积图
            data: [], // 这里会填充从 JSON 中提取的数据
          },
        ],
      };

      // 从 JSON 数据中提取库存数量，并填充到 series.data 中
      response.forEach(function (item) {
        option.series[0].data.push(
          item.inventoryAmount0,
          item.inventoryAmount30,
          item.inventoryAmount60,
          item.inventoryAmount90,
          item.inventoryAmount120,
          item.inventoryAmount150,
          item.inventoryAmount180,
          item.inventoryAmount240,
          item.inventoryAmount300,
          item.inventoryAmount1Y,
          item.inventoryAmount2Y,
          item.inventoryAmount3Y
        );
      });

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    //
    getselectSkuLikeList(key) {
      selectSkuLike({ value: key }).then((response) => {
        this.selectSkuLikeList = response;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      // this.queryParams.pageNum = 1;
      // this.queryParams.pageSize = 10;
      this.getList();
      this.tableList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams = {};
      //   this.queryParams.groupLabel = "sku";
      this.handleQuery();
    },
    rowStyle({ row, rowIndex }) {
      if (rowIndex === this.tableData.length - 1) {
        return "font-weight: bold;";
      } else {
        return "";
      }
    },
    /** 查询库龄列表 */
    getList() {
      // this.loading = true;
      inventoryAgeAllSum(this.queryParams).then((response) => {
        this.tableData = response;
        // this.total = response.total;
        // this.loading = false;
      });
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        "financial/BiInventoryAgeDwd/export",
        {
          ...this.pageReq,
        },
        `BiInventoryAgeDwd_${new Date().getTime()}.xlsx`
      );
    },
  },
};
</script>
<style lang="scss" scoped>
.custom-table .el-table__body tr:last-child {
  color: #f56c6c; /* 你想要的颜色 */
}
</style>

    /** 一级 */
    @Excel(name = "一级")
    private String firstLevelColumn;
    /** 一级 */
    @Excel(name = "二级")
    private String secondLevelColumn;

    /** 三级 */
    @Excel(name = "三级")
    private String threeLevelColumn;

    /** 产品季节 */
    @Excel(name = "产品季节")
    private String productSeason;

    /** 产品款号 */
    @Excel(name = "产品款号")
    private String item;

    /** sku */
    @Excel(name = "sku")
    private String sku;

    /** 最近入库时间 */
    @Excel(name = "最近入库时间")
    private Date earlyOInWarehouseDate;

    /** 最近出库时间 */
    @Excel(name = "最近出库时间")
    private Date earlyOutWarehouseDate;

    /** 0~30天库存量 */
    @Excel(name = " 0~30天库存量")
    private Integer inventoryQuantity;

    /** 0~30天库存金额 */
    @Excel(name = "0~30天库存金额")
    private Double inventoryAmount;

    /** 31~60天库存量 */
    @Excel(name = "31~60天库存量")
    private Integer inventoryQuantity30;

    /** 31~60天库存金额 */
    @Excel(name = "31~60天库存金额")
    private Double inventoryAmount30;

    /** 61~90天库存量 */
    @Excel(name = "61~90天库存量")
    private Integer inventoryQuantity60;

    /** 61~90天库存金额 */
    @Excel(name = "61~90天库存金额")
    private Double inventoryAmount60;

    /** 91~120天库存量 */
    @Excel(name = "91~120天库存量")
    private Integer inventoryQuantity90;

    /** 91~120天库存金额 */
    @Excel(name = "91~120天库存金额")
    private Double inventoryAmount90;

    /** 121~150天库存量 */
    @Excel(name = "121~150天库存量")
    private Integer inventoryQuantity120;

    /** 121~150天库存金额 */
    @Excel(name = "121~150天库存金额")
    private Double inventoryAmount120;

    /** 151~180天库存量 */
    @Excel(name = "151~180天库存量")
    private Integer inventoryQuantity150;

    /** 151~180天库存金额 */
    @Excel(name = "151~180天库存金额")
    private Double inventoryAmount150;

    /** 181~240天库存量 */
    @Excel(name = "181~240天库存量")
    private Integer inventoryQuantity180;

    /** 181~240天库存金额 */
    @Excel(name = "181~240天库存金额")
    private Double inventoryAmount180;

    /** 241~300天库存量 */
    @Excel(name = "241~300天库存量")
    private Integer inventoryQuantity240;

    /** 241~300天库存金额 */
    @Excel(name = "241~300天库存金额")
    private Double inventoryAmount240;

    /** 300~365天库存量 */
    @Excel(name = "300~365天库存量")
    private Integer inventoryQuantity300;

    /** 300~365天库存金额 */
    @Excel(name = "300~365天库存金额")
    private Double inventoryAmount300;

    /** 1~2年库存量 */
    @Excel(name = "1~2年库存量")
    private Integer inventoryQuantity1Y;

    /** 1~2年库存金额 */
    @Excel(name = "1~2年库存金额")
    private Double inventoryAmount1Y;

    /** 2~3年库存量 */
    @Excel(name = "2~3年库存量")
    private Integer inventoryQuantity2Y;

    /** 2~3年库存金额 */
    @Excel(name = "2~3年库存金额")
    private Double inventoryAmount2Y;

    /** 3年以上库存量 */
    @Excel(name = "3年以上库存量")
    private Integer inventoryQuantity3Y;

    /** 3年以上库存金额 */
    @Excel(name = "3年以上库存金额")
    private Double inventoryAmount3Y;
sku/item/三级/二级/一级